<template>
  <div id="aMap" class="w-100 h-100"></div>
</template>
<script>
import AMapLoader from '@amap/amap-jsapi-loader'
import MapHandler from "@/components/AMap/MapHandler2"

export default {
  data() {
    return {
      inited: false
    }
  },
  mounted() {
    this.loadMap()
  },
  methods: {
    loadMap() {
      AMapLoader.load({
        key: "679662feaf9eea69c144ec80085dc2b1",             // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Geolocation", "AMap.CitySearch"]       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      }).then(AMap => {
        this.map = new AMap.Map("aMap", {
          viewMode: "3D",
          zoom: 10,
          zooms: [3, 18],
          isHotspot: false,
          jogEnable: true,
          animateEnable: true,
          center: [106.555486, 29.572389]
        })
        const timeout = 1000, geolocation = new AMap.Geolocation({
          timeout,
          enableHighAccuracy: true,
          noIpLocate: 0,
          noGeoLocation: 0,
          GeoLocationFirst: false,
          showButton: false,
          showMarker: false,
          showCircle: false,
          panToLocation: true
        })
        geolocation.getCurrentPosition((status, result) => {
          // console.log(status, result)
          if (status == 'complete' && result.info == 'SUCCESS') this.initMapByCenter([result.position.lng, result.position.lat])
          else geolocation.getCityInfo((status, result) => {
            // console.log(status, result)
            if (status == 'complete' && result.status == 0) this.initMapByCenter(result.position)
            else {
              const citySearch = new AMap.CitySearch()
              citySearch.getLocalCity((status, result) => {
                // console.log(status, result)
                if (status == 'complete' && result.info == 'OK') this.initMapByCity(result.city || result.province)
                else this.initMap()
              })
            }
          })
        })
        setTimeout(() => {
          if (!this.inited && this.map) this.initMap()
        }, timeout * 2 + 1000)
      }).catch(e => {
        console.log(`地图初始化失败：${e}`);
        this.loadMap()
      })
    },
    initMapByCenter(center) {
      this.inited = true
      if (this.map.getCenter().lng == center[0] && this.map.getCenter().lat == center[1]) this.initMap()
      else {
        this.map.on('moveend', this.initMap, null, true)
        this.map.setCenter(center)
      }
    },
    initMapByCity(city) {
      this.inited = true
      this.map.on('moveend', this.initMap, null, true)
      this.map.setCity(city)
    },
    initMap() {
      this.inited = true
      this.$emit('init', new MapHandler(AMap, this.map))
    }
  }
}
</script>
<style lang="less" scoped>
#aMap {
  :deep(.markerTitle) {
    height: 32px;
    line-height: 32px;
    border-radius: 16px;
    position: relative;

    &.online {
      box-shadow: 0px 4px 4px 1px rgba(13, 161, 126, 0.5);
    }

    &.fault {
      box-shadow: 0px 4px 4px 1px rgba(219, 178, 16, 0.5);
    }

    &.offline {
      box-shadow: 0px 4px 4px 1px rgba(13, 71, 161, 0.5);
    }

    &:after {
      content: '';
      display: block;
      width: 0;
      height: 0;
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      border-top: 8px solid white;
      border-bottom: 8px solid transparent;
      position: absolute;
      top: 100%;
      left: 50%;
      margin-left: -8px;
    }
  }

  :deep(.amap-logo), :deep(.amap-copyright) {
    display: none !important;
  }
}
</style>
